<template>
    <div class="device-detail container-bottom-20">
        <CardBox title="设备详情"></CardBox>
        <div class="device-detail-content content-container-height-262 content-container">
            <div class="weather-grid">
                <div class="weather-item" v-for="(item,index) in itemList" :key="index">
                    <div class="label">{{item.pointName}}</div>
                    <div class="value fonts-DIN">{{item.pointValue}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import {EventBus} from "../../utils/event-bus";
let that;
export default {
    name: 'DeviceDetail',
    components: {
        CardBox
    },
    data() {
        return {
            timer:null,
            deviceId:"",
            type:"kongqi",
            itemList:null,
            selectId:0
        }
    },
    mounted() {
        this.timer=setInterval(function () {
            that.getData();
        }, 60000);
    },
    created() {
        EventBus.$on('set-biological-device-type', (message) => {
            this.type = message;
        });
        EventBus.$on('sent-device-id-to-right', (message) => {
            this.deviceId=message.id;
            this.getData();
        })
    },
    methods:{
        getData(){
            this.$api.environment.getCollectList(this.type,this.deviceId).then(res => {
                this.itemList = res
            });
        }
    },
    beforeDestroy() {
        if (this.timer !== null) {
            clearInterval(this.timer);
            this.timer = null; // 确保定时器引用被清除，防止内存泄漏
        }
    }
}
</script>

<style lang="scss" scoped>
.device-detail {
    .weather-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 262px;
        text-align: center;
        gap: 5px;
        .weather-item {
            background: rgba(65, 123, 214, 0.19);
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .label {
                color: #fff;
                font-size: 14px;
                margin-bottom: 5px;
                background-size: 32px 27px;
                background-position: 20px 0;
                background-repeat: no-repeat;
                text-indent: 60px;
            }

            .value {
                color: #ccc;
                font-size: 14px;
                text-indent: 60px;
            }
            &:nth-child(1) {
                .label {
                    background-image: url('@/assets/img/monitor-1.png');
                }
            }
            &:nth-child(2) {
                .label {
                    background-image: url('@/assets/img/monitor-2.png');
                }
            }
            &:nth-child(3) {
                .label {
                    background-image: url('@/assets/img/monitor-3.png');
                }
            }
            &:nth-child(4) {
                .label {
                    background-image: url('@/assets/img/monitor-4.png');
                }
            }
            &:nth-child(5) {
                .label {
                    background-image: url('@/assets/img/monitor-5.png');
                }
            }
            &:nth-child(6) {
                .label {
                    background-image: url('@/assets/img/monitor-6.png');
                }
            }
        }
    }
}
</style>